@charset "utf-8";
@rem:16rem;
* {margin: 0; padding: 0;}
body{
    position: relative;
}
a {
    text-decoration: none;
    color: #333
}
a:hover {
    color: #000;
    text-decoration: none
}
input {
    border:none;
    outline:0;
    background:0 0;
    box-sizing: border-box;
    border-radius: 0;
}
input:focus {
    background-color:#FFF;
    outline:0;
}
button {
    text-align:center;
    text-decoration:none;
    display:inline-block;
    border:none;
    outline:0;
    box-sizing: border-box;
    -webkit-appearance : none ;
}
button:focus{
    outline:0
}
body {
    background-color: #FFFFFF;
    font-family: "Microsoft YaHei", SimHei;
}
.search {
    position: absolute;
    //position:fixed;
     top:100px;
    width: 100%;
    height: 80/@rem;
    background-color: #fff;
    border-bottom:1px #ECECEC solid;
    -moz-box-shadow:0 0 2px #e1e1e1;
    -webkit-box-shadow:0 0 2px #e1e1e1;
    box-shadow:0 0 2px #e1e1e1;

    .search-bar {
        height:46/@rem;
        margin: 17/@rem 10/@rem;
        border: 2px solid #fb4806;
        background-color: #fb4806;
        input {
            float: left;
            width: calc(~"100% - 5.625rem");
            height: 46/@rem;
            padding-left: 5/@rem;
            padding-right: 5/@rem;
            background-color: #fff;
            font-size: 100%;
        }
        button {
            float: left;
            width: 90/@rem;
            height: 46/@rem;
            background-color: #fb4806;
            color: white;
            font-size: 100%;
        }
    }
}

.content {
    width: 100%;
    margin: 90/@rem auto 0 auto;
    height: auto;
    .pro {
        width: calc(~"50% - 0.9375rem");
        height: auto;
        float:left;
        margin:0 0 10/@rem 10/@rem;
        border: 1px solid #e7e7e7;

        .pro-img {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .pro-name {
            margin: 5px 5px 0 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;  //需要显示时文本行数
            overflow: hidden;
            font-size: 90%;
        }

        .pro-price {
            margin: 5/@rem;
            .pro-coupon-price {
                display: inline;
                color: red;
                border: 1px solid red;
                padding: 0 2/@rem;
                font-size: 95%;
            }
            .pro-old-price {
                margin-top: 5/@rem;
                color: #fb4206;
                font-weight:bold;
                font-size: 95%;
            }
        }

        .pro-coupon {
            margin: 0;
            background-color: #fb4206;
            overflow: hidden;
            color: white;
            .coupon-info {
                float: left;
                width: calc(~"100% - 2.5rem");
                .coupon-info1 {
                    margin: 2/@rem 5/@rem;
                    display: block;
                    font-size: 90%;
                }
                .coupon-info2 {
                    margin: 2/@rem 5/@rem;
                    display: block;
                    font-size: 95%;
                }
            }
            .coupon-next {
                float: left;
                width: 25/@rem;
                height: 25/@rem;
                margin-top: 12.5/@rem;
                margin-left: 7.5/@rem;
                background: url("/static/img/coupon-next.png") no-repeat;
                background-size: 100%;
                overflow: hidden;
            }
        }
    }
}


#load-data {
    width: 38%;
    margin: 10/@rem auto 10/@rem auto;
    overflow: hidden;
    ul li{
        height: 20/@rem;
        float: left;
        list-style: none;
        margin-left: 5/@rem;
    }
    #load-animation {
        width: 20/@rem;
        background: url("/static/img/loading.gif") no-repeat;
        background-size: 100%;
    }
    #load-string {
        font-size: 0.95rem;
    }
}
